<template>
  <div class="subjecktlist content">
    <div class="head_top">
      <el-card class="card_box">
        <el-form :model="form" inline ref="form">
          <el-form-item label="学科编号" prop="rid">
            <el-input v-model="form.rid" class="w100"></el-input>
          </el-form-item>
          <el-form-item label="学科名称" prop="name">
            <el-input v-model="form.name" class="w149"></el-input>
          </el-form-item>
          <el-form-item label="创建者" prop="username">
            <el-input v-model="form.username" class="w100"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" class="w149">
              <el-option label="禁用" value="0"></el-option>
              <el-option label="选用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">清除</el-button>
            <el-button
              type="primary"
              v-if="$store.state.role != '学生'"
              @click="$refs.dialog.isShow = true"
              >+新增学科</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="main">
      <el-card>
        <el-table :data="list" style="100%">
          <el-table-column label="序号" width="50">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{
                (pagination.currentPage - 1) * pagination.pageSize +
                  scope.$index +
                  1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学科编号" prop="rid" width="120">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.rid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学科名称" prop="name" width="150">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="简称" prop="short_name" width="120">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.short_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者" prop="username" width="130">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建日期" prop="create_time" width="230">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template v-slot="scope">
              <span style="margin-left: 10px">{{
                scope.row.status == 0 ? "禁用" : "启用"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            v-if="$store.state.role != '学生'"
          >
            <template v-slot="scope">
              <el-button type="text" @click="exid(scope.row)">编辑</el-button>
              <el-button type="text" @click="setSub(scope.row.id)">{{
                scope.row.status == 0 ? "启用" : "禁用"
              }}</el-button>
              <el-button type="text" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[1, 5, 20, 40]"
          :page-size="pagination.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="page "
        >
        </el-pagination>
      </el-card>
    </div>
    <Dialog
      ref="dialog"
      :isShow="isShow"
      @getlist="getData"
      :mode="add"
      :editInfo="editInfo"
    ></Dialog>
  </div>
</template>

<script>
import {
  getSubjectList,
  setSubject,
  delSubject,
} from "@/api/getSubjectList.js";
import Dialog from "@/components/dialog.vue";
export default {
  components: {
    Dialog,
  },
  watch: {
    "$refs.dialog.isShow"(newValue) {
      if (!newValue) {
        this.$refs.add_form.resetFields();
      }
    },
  },
  data() {
    return {
      isShow: false,
      add: "add",
      form: {
        name: "", //否	string	学科名称
        page: "", //否	string	页码 默认为1
        limit: "", //否	string	页尺寸 默认为10
        rid: "", //否	string	学科编号
        username: "", //否	string	创建者用户名
        status: "", //否	string	状态 0(禁用) 1(启用)
      },
      editInfo: {},
      list: [],
      pagination: {
        total: 1,
        pageSize: 1,
        currentPage: 1,
      },
    };
  },
  methods: {
    del(id) {
      this.$confirm("你确定要删除吗?", "温馨提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消删除",
        type: "warning",
      })
        .then(() => {
          delSubject({ id })
            .then(() => {
              this.$message.success("删除成功");
              this.getData();
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    setSub(id) {
      setSubject({ id })
        .then(() => {
          this.$message.success("状态修改成功");
          this.getData();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    exid(row) {
      console.log("编辑信息", row);
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.add = "edit";
      this.$refs.dialog.isShow = true;
    },
    search() {
      this.getData();
      this.reset();
    },
    reset() {
      this.$refs.form.resetFields();
    },
    getData() {
      let data = {
        ...this.form,
        limit: this.pagination.pageSize,
        page: this.pagination.currentPage,
      };
      getSubjectList(data).then((res) => {
        this.list = res.data.data.items;
        this.pagination.total = res.data.data.pagination.total;
      });
    },
    //页容量改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getData();
    },
    //当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getData();
    },
  },
  created() {
    console.log("woshi", this.$store.state.role);
    this.getData();
  },
};
</script>

<style lang="less">
.content {
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__headerbtn {
    display: none;
  }
  .dialog-title {
    height: 53px;
    background: linear-gradient(to right, #01c5fa, #1394fa);
    font-size: 18px;
    line-height: 53px;
    text-align: center;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0px;
    .icon {
      float: right;
      margin-top: 16px;
      margin-right: 15px;
      cursor: pointer;
    }
  }
  .page {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .has-gutter {
    tr {
      th {
        text-align: center;
      }
    }
  }

  .head_top {
    padding: 0;
  }
  .main {
    padding: 0;
  }
  .card_box {
    height: 100%;
  }
  .w100 {
    width: 100px;
  }
  .w149 {
    width: 149px;
  }
}
</style>
